<template>
  <ComponentContainerProperty v-model="formData.style">
    <template #default>
      <el-form :model="formData" label-width="80px">
        <!-- 图片配置 -->
        <el-form-item label="图片" prop="imageUrl">
          <UploadImg v-model="formData.imageUrl" :limit="1">
            <template #tip>建议尺寸 750x400px</template>
          </UploadImg>
        </el-form-item>
        
        <!-- 跳转链接 -->
        <el-form-item label="跳转链接" prop="linkUrl">
          <el-input 
            v-model="formData.linkUrl" 
            placeholder="请输入跳转链接，如：https://www.example.com"
            clearable
          />
        </el-form-item>
        
        <!-- 打开方式 -->
        <el-form-item label="打开方式" prop="openInNewTab">
          <el-radio-group v-model="formData.openInNewTab">
            <el-radio :value="false">当前窗口</el-radio>
            <el-radio :value="true">新窗口</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 图片高度 -->
        <el-form-item label="图片高度" prop="imageHeight">
          <el-slider
            v-model="formData.imageHeight"
            :min="100"
            :max="500"
            :step="10"
            show-input
            input-size="small"
            :show-input-controls="false"
          />
        </el-form-item>
        
        <!-- 描述文字 -->
        <el-form-item label="显示描述" prop="showDescription">
          <el-switch v-model="formData.showDescription" />
        </el-form-item>
        
        <template v-if="formData.showDescription">
          <!-- 描述内容 -->
          <el-form-item label="描述内容" prop="description">
            <el-input 
              v-model="formData.description" 
              placeholder="请输入描述文字"
              type="textarea"
              :rows="2"
            />
          </el-form-item>
          
          <!-- 描述颜色 -->
          <el-form-item label="文字颜色" prop="descriptionColor">
            <ColorInput v-model="formData.descriptionColor" />
          </el-form-item>
          
          <!-- 文字大小 -->
          <el-form-item label="文字大小" prop="descriptionSize">
            <el-slider
              v-model="formData.descriptionSize"
              :min="10"
              :max="24"
              :step="1"
              show-input
              input-size="small"
              :show-input-controls="false"
            />
          </el-form-item>
        </template>
      </el-form>
    </template>
  </ComponentContainerProperty>
</template>

<script setup lang="ts">
import { ImageLinkProperty } from './config'
import { useVModel } from '@vueuse/core'

defineOptions({ name: 'ImageLinkProperty' })

const props = defineProps<{ modelValue: ImageLinkProperty }>()
const emit = defineEmits(['update:modelValue'])

const formData = useVModel(props, 'modelValue', emit)
</script>

